<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 网页开发中，<link> 和 @import 都可以用来引入 CSS 样式表，但它们在加载顺序、浏览器兼容性、性能和用法上有一些关键的区别。
        // 1. 加载顺序
            // <link>：CSS 文件通过 <link> 标签直接在 HTML 文档中引入。
            // 浏览器在解析 HTML 时会立即加载并应用通过 <link> 引入的样式表，
            // 因此 link 标签的样式表会被优先加载。

            // @import：@import 是一种 CSS 语法，用于在 CSS 文件中引入其他样式表。
            // 由于 @import 只能在 CSS 文件中使用，而 CSS 文件通常在 HTML 加载后才被解析，
            // 因此通过 @import 引入的样式表会延迟加载。这个延迟可能导致页面在加载时样式闪烁。


        // 2.. 浏览器兼容性
            // <link>：所有主流浏览器（包括早期版本）都支持 <link> 标签，因此它具有较好的兼容性。

            // @import：@import 在旧版浏览器（如 IE4）中不被支持，虽然现代浏览器都支持它，
            // 但由于加载的顺序和性能问题，通常不推荐使用 @import。

        // 3. 性能
            // <link>：样式表通过 <link> 标签引入时，浏览器可以并行加载多个 CSS 文件，这有助于提高页面加载速度。

            // @import：@import 会导致样式表的加载被串行化，因为浏览器需要先加载并解析主样式表，
            // 才能进一步加载被 @import 的样式表。这可能会导致页面加载速度减慢，尤其是在使用多个 @import 时。

        // 4. 用法场景
            // <link>：通常用于将外部样式表引入 HTML 文档，适合所有页面级别的样式加载。

            // @import：一般用于在样式表中组织和引入其他样式表。
            // 它适合将多个样式表文件合并在一起或分模块管理样式时使用，
            // 但不推荐用于关键样式的加载。

        // 5.DOM可控性区别
            // 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
        
        // 6.权重区别
            // link引入的样式权重大于@import引入的样式。
    </script>
</body>
</html>